<template>
  <view class="credential" @click="globalTouth">
    <view class="credential-title">资质查看</view>
    <view class="credential-content">
      <view v-if="info.image1" class="credential-content-title">营业执照</view>
      <view v-if="info.image1" class="flex-column">
        <uv-image
          :src="info.image1"
          lazy-load
          observe-lazy-load
          width="180rpx"
          height="120rpx"
          @click="handlePreview(0, [info.image1])"
        />
      </view>
      <view v-if="info.image2" class="credential-content-title">药品经营许可证</view>
      <view v-if="info.image2" class="flex-column">
        <uv-image
          :src="info.image2"
          lazy-load
          observe-lazy-load
          width="180rpx"
          height="120rpx"
          @click="handlePreview(0, [info.image2])"
        />
      </view>
      <view v-if="info.image3" class="credential-content-title">食品经营许可证</view>
      <view v-if="info.image3" class="flex-column">
        <uv-image
          :src="info.image3"
          lazy-load
          observe-lazy-load
          width="180rpx"
          height="120rpx"
          @click="handlePreview(0, [info.image3])"
        />
      </view>
      <view v-if="info.image4 || info.image5" class="credential-content-title">
        法人身份证复印件
      </view>
      <view class="flex-column">
        <uv-image
          v-if="info.image4"
          :src="info.image4"
          lazy-load
          observe-lazy-load
          width="180rpx"
          height="120rpx"
          style="margin-right: 13.9rpx"
          @click="handlePreview(0, [info.image4])"
        />
        <uv-image
          v-if="info.image4"
          :src="info.image5"
          lazy-load
          observe-lazy-load
          width="180rpx"
          height="120rpx"
          @click="handlePreview(0, [info.image5])"
        />
      </view>
      <view
        v-if="info.image6 && info.image6.length != 0"
        class="credential-content-title"
      >
        门头照片
      </view>
      <view class="row">
        <uv-image
          v-for="(item, index) in info.image6"
          :key="index"
          :src="item"
          lazy-load
          observe-lazy-load
          width="180rpx"
          height="120rpx"
          style="display: inline-block; margin-right: 13.9rpx"
          @click="handlePreview(index, info.image6)"
        />
      </view>
    </view>
    <view class="flex-column">
      <g-button
        width="243.25rpx"
        text="返回首页"
        size="25.05rpx"
        padding="16.68rpx"
        margin="52.82rpx 0 0 0"
        radius="68.8rpx"
        @click="handleHome"
      />
    </view>
    <g-shadow ref="shadowRef" />
  </view>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getTerminalStore } from "@/request/api";
import config from "@/request/baseUrl.js";

const info = ref<any>({});
const shadowRef = ref(); // 遮罩层
const serialNumber = ref<string>(""); // 序列号

onMounted(() => {
  let serial = uni.getStorageSync("serialNumber"); // 获取序列号
  if (serial) {
    serialNumber.value = serial;
    getInfo();
  }
});

// 触发全局触摸事件
const globalTouth = () => {
  shadowRef.value.globalTouth();
};

// 获取资质信息
const getInfo = () => {
  getTerminalStore(serialNumber.value).then((res: any) => {
    let obj = res.data;
    obj.image1 = obj.businessLicense ? config.baseUrl + obj.businessLicense : "";
    obj.image2 = obj.licenseForPharmaceuticalTrading
      ? config.baseUrl + obj.licenseForPharmaceuticalTrading
      : "";
    obj.image3 = obj.foodBusinessLicense ? config.baseUrl + obj.foodBusinessLicense : "";
    obj.image4 = obj.legalPersonIdentityCardFront
      ? config.baseUrl + obj.legalPersonIdentityCardFront
      : "";
    obj.image5 = obj.legalPersonIdentityCardBack
      ? config.baseUrl + obj.legalPersonIdentityCardBack
      : "";
    if (obj.shopPhoto) {
      obj.image6 = obj.shopPhoto?.split(",").map((i: string) => config.baseUrl + i);
    } else {
      obj.image6 = [];
    }
    info.value = obj;
  });
};

// 预览图片
const handlePreview = (index: number, urls: string[]) => {
  uni.previewImage({
    current: index,
    urls,
  });
};

// 首页
const handleHome = () => {
  uni.$emit("backHome");
  uni.navigateBack({ delta: 1 });
};
</script>
<style lang="scss" scoped>
.credential {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, #c8df8f 0%, rgba(108, 197, 254, 0) 100%);
  padding: 34.75rpx;
  box-sizing: border-box;
  .credential-title {
    font-family: Source Han Sans;
    font-weight: 700;
    font-size: 30rpx;
    color: #41992d;
    text-align: center;
  }
  .credential-content {
    width: 100%;
    max-height: 1048rpx;
    margin-top: 39.6rpx;
    padding: 24.3rpx;
    box-sizing: border-box;
    background: #ffffff;
    overflow-y: auto;
    box-shadow: inset 0 1.39rpx 1.39rpx 0 rgba(255, 255, 255, 0.3),
      0 20.85rpx 34.75rpx 0 rgba(33, 100, 208, 0.2);
    border-radius: 20.85rpx;
    &-title {
      height: 36.14rpx;
      font-weight: 700;
      font-size: 25.02rpx;
      color: #3d3d3d;
      line-height: 36.14rpx;
      vertical-align: top;
      &::before {
        content: "";
        display: inline-block;
        width: 6.255rpx;
        height: 27.8rpx;
        background: #41992d;
        margin-right: 13.9rpx;
        vertical-align: middle;
      }
    }
  }
}
.flex-column {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10rpx 0;
}
.row {
  overflow-x: auto;
  white-space: nowrap;
  margin: 10rpx 0;
  .uv-image {
    display: inline-block;
  }
}
</style>
